import React from 'react';
import { connect } from 'dva';
import UserList from '../../components/user/UserList';
import UserTool from '../../components/user/UserTool';
import UserModal from '../../components/user/UserModal';
import UserUpdateModal from '../../components/user/UserUpdateModal';
import UserViewModal from '../../components/user/UserViewModal';
import UserSearch from '../../components/user/UserSearch';
import {Icon, Layout, Menu, message, Modal} from 'antd';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';



class User extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
    };
  }
  render(){
    const { dispatch,user } = this.props;
    const { list,total,pageIndex,pageSize,selectedRows,selectedRowKeys,searchParams,userItem,visible, updateVisible, viewVisible } = user;

    const userListProps = {
        list,
        total,
        pageIndex,
        pageSize,
        viewVisible,
        rowSelection:{
            selectedRows,
            selectedRowKeys,
            onChange:(selectedRowKeys, selectedRows)=>{
                console.log("当前选择的行的key有:"+selectedRowKeys);
                console.log("当前选择的行的内容有:"+selectedRows);
                dispatch({
                     type:'user/updateState',
                     payload:{
                         selectedRowKeys,
                         selectedRows
                     }
                 });
            },
          selections: [
            {
              key: 'all-data',
              text: 'Select All Data',
              onSelect: () => {
                this.setState({
                  selectedRowKeys: [...Array(5).keys()], // 0...45
                });
              },
            },
          ],
        },
        onView:(record)=>{
            dispatch({
                type:'user/updateState',
                payload:{
                viewVisible:true,
                userItem:record,
            }
          });
        },
        onDeleteOne:(record)=>{
            console.log(record.id);
            Modal.confirm({
                title: '系统提示',
                 content: '确定要删除这行'+record.name+'的数据？',
                 okText: '确认',
                 cancelText: '取消',
                 onOk:()=>{
                    dispatch({
                        type:'user/deletetUsers',
                        payload:{
                            ids:record.id,
                        }
                    });
                },
            })
        },
        onUpdateOne:(record)=>{
          dispatch({
              type:'user/updateState',
              payload:{
                updateVisible:true,
                userItem:record,
              }
          });
        },
        onPageChange:(page)=>{
          console.log("当前页码改变:"+page);
          dispatch({
            type:'user/updateState',
            payload:{
              pageIndex:page,
              pageSize:pageSize,
            }
          });
          dispatch({
              type:'user/getUserList',
              payload:{
                  pageIndex:page,
                  searchParams
              }
          });
        },
      onPageSizeChange:(current, pageSize)=>{
        console.log("当前页码改变:"+current+",页大小:"+pageSize);
        dispatch({
          type:'user/updateState',
          payload:{
            pageIndex:current,
            pageSize:pageSize,
          }
        });
        dispatch({
          type:'user/getUserList',
          payload:{
            pageIndex:current,
            pageSize:pageSize,
            searchParams
          }
        });
      },

    }
    const userToolProps = {
        selectedRows,
        onAdd:()=>{
            dispatch({
                 type:'user/updateState',
                 payload:{
                     visible:true,
                     userItem:{},
                 }
             });
        },
        onUpdate:()=>{
            if( undefined === selectedRows){
                message.warning("请至少选择一条数据");
                return;
            }else if(selectedRows.length !== 1){
                message.warning("只能选择一条数据");
                return;
            }
            dispatch({
              type:'user/updateState',
              payload:{
                updateVisible:true,
                userItem:selectedRows[0],
              }
          });
        },
        onDelete:()=>{
            if(selectedRows === undefined||selectedRows.length === 0){
                message.warning("请至少选择一条要删除的数据");
                return;
            }
            console.log("selectedRowKeys:  "+selectedRowKeys);
            console.log("selectedRows:  "+selectedRows);
            dispatch({
                type:'user/deletetUsers',
                payload:{
                    ids:selectedRowKeys.join(','),
                }
            });
        },
    }
    const userModelProps = {
        userItem,
        visible,
        onSubmit:(values)=>{
            dispatch({
                 type:'user/insertUser',
                 payload:{
                     values
                 }
             });
        },
        onCancel:()=>{
          dispatch({
              type:'user/updateState',
              payload:{
                  visible:false,
                  userItem:{},
              }
          });
        }
    }
    const userUpdateModelProps = {
        userItem,
        updateVisible,
        onUpdateSubmit:(values)=>{
            dispatch({
                 type:'user/updateUser',
                 payload:{
                     values
                 }
             });
        },
        onUpdateCancel:()=>{
          dispatch({
              type:'user/updateState',
              payload:{
                updateVisible:false,
                userItem:{},
              }
          });
        }
    }
    const userViewModelProps = {
        userItem,
        viewVisible,
        onViewCancel:()=>{
          dispatch({
              type:'user/updateState',
              payload:{
                viewVisible:false,
                userItem:{},
              }
          });
        }
    }
    const userSearchProps = {
        searchParams,
        onHandleSearch:(params)=>{
            console.log(params);
            dispatch({
                 type:'user/getUserList',
                 payload:{
                     searchParams:params
                 }
             });
        },
    }

    const toggle = () => {
      this.setState({
        collapsed: !this.state.collapsed,
      });
    };
    return (
      <div>
        <Layout>
          <Layout.Sider trigger={null} collapsible collapsed={this.state.collapsed} >
            <div className="logo" style={{
              width: '120px',
              height: '32px',
              background: 'rgba(255, 255, 255, 0.2)',
              margin: '16px',}}
            >
              <Icon type="ant-cloud" />
              旅游管理系统
            </div>
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} style={{height:'100%'}}>
              <Menu.SubMenu key="sub1" title={<span><Icon type="user" />系统管理</span>}>
                <Menu.Item key="1"><Icon type="user" /><span>用户管理</span></Menu.Item>
                <Menu.Item key="2"><Icon type="video-camera" /><span>员工管理</span></Menu.Item>
                <Menu.Item key="3"><Icon type="upload" /><span>景区管理</span></Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="sub2" title={<span><Icon type="user" />业务管理</span>}>
                <Menu.Item key="1"><Icon type="user" /><span>订单管理</span></Menu.Item>
                <Menu.Item key="2"><Icon type="video-camera" /><span>员工管理</span></Menu.Item>
                <Menu.Item key="3"><Icon type="upload" /><span>景区管理</span></Menu.Item>
              </Menu.SubMenu>
              <Menu.SubMenu key="sub3" title={<span><Icon type="user" />系统管理</span>}>
                <Menu.Item key="1"><Icon type="user" /><span>注册中心</span></Menu.Item>
                <Menu.Item key="2"><Icon type="video-camera" /><span>数字大屏</span></Menu.Item>
                <Menu.Item key="3"><Icon type="upload" /><span>景区管理</span></Menu.Item>
              </Menu.SubMenu>
            </Menu>
          </Layout.Sider>
          <Layout>
            <Layout.Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={toggle}
              />
            </Layout.Header>
            <Layout.Content
              style={{
                margin: '24px 16px',
                padding: 12,
                background: '#fff',
                minHeight: 280,
              }}
            >
              <ConfigProvider locale={zh_CN}>
                <UserSearch {...userSearchProps}/>
                <UserTool {...userToolProps}/>
                <UserList {...userListProps}/>
                <UserModal {...userModelProps}/>
                <UserUpdateModal {...userUpdateModelProps}/>
                <UserViewModal {...userViewModelProps}/>
              </ConfigProvider>
            </Layout.Content>
          </Layout>
        </Layout>



      </div>
    );
  }
}

function mapStateToProps({ user }) {
  return { user };
}
export default connect(mapStateToProps)(User);
